<template>
	<div>
        <svg  v-for="i in diyParseInt(star)"  @click="clickstar(i)" v-bind:key="'i_'+i" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block text-yellow-400 cursor-pointer" viewBox="0 0 20 20" fill="currentColor">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg><svg  v-for="k in (5-diyParseInt(star))" v-bind:key="'k_'+k"  @click="clickstar(diyParseInt(star)+k)"  xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block text-grey-200 cursor-pointer" style="color:#eee" viewBox="0 0 20 20" fill="currentColor">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
    </div>
</template>
<script>
export default {
       props: {
        count: {
          type: Number,
          default: 3,
        },
        name: {
          type: String,
          default: "",
        }
    },
		data(){
      // //console.log("data count:",this.count)
			return {
           star:      this.count
			}
		},
		methods:{
      diyParseInt(count){
         count = parseInt(count);
         return count?count:0;
      },
			clickstar(count){
          if(this.name!=""){
            this.star = count;
          }
          this.$emit('clickstar',{name:this.name,count:count})			
			}
		}
	}
</script>
 